<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="8" >
            <a-form-item label="楼宇编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input disabled v-decorator="['buildingCode', validatorRules.buildingCode]" placeholder="请输入楼宇编码"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="楼宇名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['buildingName', validatorRules.buildingName]" placeholder="请输入楼宇名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="楼宇地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['address']" placeholder="请输入楼宇地址"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="所属项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['buildingProject', validatorRules.buildingProject]" :trigger-change="true" dictCode="xy_park_project,project_name,project_code" placeholder="请选择所属项目"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="行政区域" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['administrativeArea']" placeholder="请输入行政区域"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="产权性质" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['propertyRight', validatorRules.propertyRight]" :trigger-change="true" dictCode="park_nature_property" placeholder="请选择产权性质"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="建筑面积（㎡）" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['buildingArea', validatorRules.buildingArea]" placeholder="请输入建筑面积（㎡）" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="产权面积（㎡）" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['propertyArea', validatorRules.propertyArea]" placeholder="请输入产权面积（㎡）" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="房源数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['houseingQty', validatorRules.houseingQty]" placeholder="请输入房源数量" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="首层" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['firstFloor', validatorRules.firstFloor]" placeholder="请输入首层" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="顶层" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['lastFloor', validatorRules.lastFloor]" placeholder="请输入顶层" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="楼高（m）" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['buildingHeight', validatorRules.buildingHeight]" placeholder="请输入楼高（m）" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['remarks']" rows="4" placeholder="请输入备注"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
      <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="楼层信息" :key="refKeys[0]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[0]"
          :loading="xyParkFloorTable.loading"
          :columns="xyParkFloorTable.columns"
          :dataSource="xyParkFloorTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true"/>
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script>

import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDictSelectTag from '@/components/dict/JDictSelectTag'

export default {
  name: 'XyParkBuildlingForm',
  mixins: [JEditableTableMixin],
  components: {
    JFormContainer,
    JDictSelectTag
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 21 }
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        buildingCode: {
          rules: [
            { required: true, message: '请输入楼宇编码!' },
            { validator: (rule, value, callback) => validateDuplicateValue('xy_park_buildling', 'building_code', value, this.model.id, callback) }
          ]
        },
        buildingName: {
          rules: [
            { required: true, message: '请输入楼宇名称!' }
          ]
        },
        buildingProject: {
          rules: [
            { required: true, message: '请输入所属项目!' }
          ]
        },
        propertyRight: {
          rules: [
            { required: true, message: '请输入产权性质!' }
          ]
        },
        buildingArea: {
          rules: [
            { required: true, message: '请输入建筑面积（㎡）!' },
            { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }
          ]
        },
        propertyArea: {
          rules: [
            { required: true, message: '请输入产权面积（㎡）!' },
            { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }
          ]
        },
        houseingQty: {
          rules: [
            { required: true, message: '请输入房源数量!' },
            { pattern: /^-?\d+$/, message: '请输入整数!' }
          ]
        },
        firstFloor: {
          rules: [
            { required: true, message: '请输入首层!' },
            { pattern: /^-?\d+$/, message: '请输入整数!' }
          ]
        },
        lastFloor: {
          rules: [
            { required: true, message: '请输入顶层!' },
            { pattern: /^-?\d+$/, message: '请输入整数!' }
          ]
        },
        buildingHeight: {
          rules: [
            { required: true, message: '请输入楼高（m）!' },
            { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }
          ]
        }
      },
      refKeys: ['xyParkFloor'],
      tableKeys: ['xyParkFloor'],
      activeKey: 'xyParkFloor',
      // 楼层信息
      xyParkFloorTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '楼层名称',
            key: 'floorName',
            type: FormTypes.inputNumber,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '楼层层高（m）',
            key: 'floorHeight',
            type: FormTypes.inputNumber,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '备注',
            key: 'remarks',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          }
        ]
      },
      url: {
        add: '/community/xyParkBuildling/add',
        edit: '/community/xyParkBuildling/edit',
        queryById: '/community/xyParkBuildling/queryById',
        xyParkFloor: {
          list: '/community/xyParkBuildling/queryXyParkFloorByMainId'
        }
      }
    }
  },
  props: {
    // 流程表单data
    formData: {
      type: Object,
      default: () => {},
      required: false
    },
    // 表单模式：false流程表单 true普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    // 如果是流程中表单，则需要加载流程表单data
    this.showFlowData()
  },
  methods: {
    addBefore() {
      this.form.resetFields()
      this.xyParkFloorTable.dataSource = []
    },
    getAllTable() {
      const values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      const fieldval = pick(this.model, 'buildingCode', 'buildingName', 'address', 'buildingProject', 'administrativeArea', 'propertyRight', 'buildingArea', 'propertyArea', 'houseingQty', 'firstFloor', 'lastFloor', 'buildingHeight', 'remarks')
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldval)
      })
      // 加载子表数据
      if (this.model.buildingCode) {
        const params = { id: this.model.buildingCode }
        this.requestSubTableData(this.url.xyParkFloor.list, params, this.xyParkFloorTable)
      }
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      const main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // 展开
        xyParkFloorList: allValues.tablesValue[0].values
      }
    },
    // 渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        const params = { id: this.formData.dataId }
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result)
          }
        })
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    },
    popupCallback(row) {
      this.form.setFieldsValue(pick(row, 'buildingCode', 'buildingName', 'address', 'buildingProject', 'administrativeArea', 'propertyRight', 'buildingArea', 'propertyArea', 'houseingQty', 'firstFloor', 'lastFloor', 'buildingHeight', 'remarks'))
    }

  }
}
</script>

<style scoped>
</style>
